<template lang="html">
    <div id="BannerList" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
        <db-breadcrumb></db-breadcrumb>
        <div class="db-content-inner">
            <div class="filters">
                <div class="filter">
                    <el-input placeholder="banner名称" v-model="filters.bannerName"></el-input>
                </div>
                <div class="filter">
                    <el-input placeholder="banner类型" v-model="filters.bannerType"></el-input>
                </div>
                <div class="filter">
                    <el-date-picker type="date" placeholder="添加日期" style="width:150px" v-model="filters.addDate"></el-date-picker>
                </div>
                <el-button type="primary" @click="handleSearch()">搜索</el-button>
                <el-button type="primary" @click="createDialog = true">创建</el-button>
            </div>
            <el-table :data="tableData" ref="table" style="width: 100%" stripe border>
                <el-table-column prop="bannerName" label="banner名称" width="120"></el-table-column>
                <el-table-column prop="bannerType" label="banner类型" width="90"></el-table-column>
                <el-table-column prop="url" label="图片地址"></el-table-column>
                <el-table-column prop="addDate" label="添加时间" inline-template>
                    <div>
                        <span v-if="row.addDate">{{new Date(row.addDate).Format('yyyy-MM-dd')}}</span>
                        
                    </div>
                </el-table-column>
                <el-table-column prop="bannerSort" label="排序"></el-table-column>
                <el-table-column prop="status" label="状态"></el-table-column>
                <el-table-column :context="_self" width="250" inline-template label="操作">
                    <div>
                        <el-button size="small" @click="handleEdit($index, row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete($index, row)">删除</el-button>
                    </div>
                </el-table-column>
            </el-table>
            <div class="pagination-wrapper" v-show="!loading">
                <el-pagination layout="prev,pager,next,jumper,total" @current-change="handleCurrentChange" :current-page="filters.page" :total="total" :page-size="20">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="保存" v-model="createDialog" size="small">
            <el-form ref="createFrom" :model="form" label-width="90px">
                <el-form-item label="banner名称" prop="bannerName">
                    <el-input placeholder="请输入banner名称" v-model="form.bannerName"></el-input>
                </el-form-item>
                <el-form-item label="banner类型" prop="bannerType">
                    <el-input placeholder="请输入banner类型" v-model="form.bannerType"></el-input>
                </el-form-item>
                <el-form-item label="banner图片:" prop="url">
                    <el-upload class="avatar-uploader" action="v1/upload/bannerImg" :on-success="handleImgSuccess" :on-error="handleImgError" :before-upload="handleBeforeUpload" :show-file-list="false">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="排序" prop="bannerSort">
                    <el-input placeholder="请输入排序" v-model="form.bannerSort"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                            <el-button @click="createDialog = false">取 消</el-button>
                            <el-button type="primary" @click="handleSave()">确 定</el-button>
                        </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getBannerList,
        getBannerDetail,
        addBanner,
        deleteBanner
    } from '../../api/api';
    
    export default {
        data() {
            return {
                imageUrl: '',
                filters: {
                    bannerName: '',
                    bannerType: '',
                    addDate: '',
                    page:1,
                    size:20
                },
                form: {
                    id: '',
                    bannerName: '',
                    bannerType: '',
                    url: '',
                    bannerSort: '',
                    status: 1
                },
                tableData: null,
                loading: false,
                createDialog: false,
                total:0,
            }
        },
        methods: {
            handleSearch() {
                this.filters.page = 1;
                this.getGrid();
            },
            handleEdit(index, row) {
                this.loading = true;
                getBannerDetail(row.id).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        this.form = data;
                        this.imageUrl = data.url;
                        this.createDialog = true;
                    }
                });
            },
            handleDelete(index, row) {
                this.$confirm('确定是否删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteBanner(row.id).then(result => {
                        let {
                            errorMsg,
                            sysCode,
                            data
                        } = result;
                        if (sysCode !== 1) {
                            this.$message.error(errorMsg);
                        } else {
                            this.tableData.splice(index, 1);
    
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            handleCurrentChange(val) {
                this.filters.page = val;
                this.getGrid();
            },
            handleSave() {
                this.loading = true;
                addBanner(this.form).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        const msg = this.form.id ? '编辑成功' : '新增成功'
                        this.$message({
                            type: 'success',
                            message: msg
                        });
                    }
                });
            },
            getGrid() {
                this.loading = true;

                var params =  JSON.parse(JSON.stringify(this.filters));
                params.page = params.page - 1;
                
                getBannerList(params).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        this.tableData = data.content;
                        this.filters.page =  data.number + 1;
                        this.total = data.totalElements;
                    }
                });
            },
            handleImgRemove(file, fileList) {
                console.log(file, fileList);
            },
            handleImgSuccess(res, file) {
                this.form.url = res.data[0];
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            handleImgError(err, file, fileList) {
    
            },
            handleBeforeUpload(file) {
                var reg = new RegExp(/\.jpg$|\.jpeg$|\.gif$|\.png$|\.bmp$/i)
                if (!reg.test(file.name)) {
                    this.$message.error('请上传图片格式!');
                    return false
                }
    
                if (file.size > (5 * 1024 * 1024)) {
                    this.$message.error('图片最大不能超过5M!');
                    return false;
                }
            }
        },
        mounted() {
            this.getGrid();
        }
    }
</script>

<style lang="scss">
    #BannerList {
        .filters {
            margin: 0 0 20px 0;
            border: 1px #efefef solid;
            padding: 10px;
            background: #f9f9f9;
            .filter {
                display: inline-block;
                width: auto;
                padding: 10px;
                border-radius: 5px;
                .el-select {
                    display: inline-block;
                }
            }
            .el-input {
                width: 150px;
                display: inline-block;
            }
        }
        .pagination-wrapper {
            text-align: center;
            padding: 30px;
        }
    }
</style>